<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="header">
      <div>
        <h1>API Mock</h1>
        <p>轻量级接口模拟工具</p>
      </div>
      <button class="btn-open-tab" id="openTab">在新标签页中打开</button>
    </div>

    <div class="container">
      <div class="card">
        <div class="input-group">
          <label>URL 匹配规则</label>
          <div class="url-row">
            <select id="matchMode" class="match-mode-select">
              <option value="contains">包含</option>
              <option value="exact">完整匹配</option>
            </select>
            <input id="url" placeholder="输入 URL 或关键词" />
          </div>
        </div>

        <div class="input-group">
          <label>请求方法</label>
          <select id="method">
            <option value="ALL">ALL</option>
            <option value="GET">GET</option>
            <option value="POST">POST</option>
            <option value="PUT">PUT</option>
            <option value="DELETE">DELETE</option>
          </select>
        </div>

        <div class="input-group">
          <label>Mock 数据 (JSON)</label>
          <textarea id="data" placeholder='{"code": 0, "data": {}}'></textarea>
        </div>

        <div class="btn-group">
          <button id="add" class="btn-primary">添加规则</button>
          <button id="clear" class="btn-secondary">清空全部</button>
        </div>
      </div>

      <div class="rules-header">
        <h2>已添加规则</h2>
        <span class="rules-count" id="count">0 条</span>
      </div>

      <div id="rules"></div>
    </div>

    <script src="popup.js"></script>
  </body>
</html>
